/* =====================================================================
   Main.css (optimized and scalable)
   - Mobile-first
   - Typography tokens + utilities without repetition
   - Helpers with consistent naming
   - Controlled horizontal scroll
   ===================================================================== */

[hidden]{ display: none !important; }


/* ====== 0) TOKENS / ROOT ====== */
:root{
  /* Typography */
  --font-title: "Playfair Display","Cormorant Garamond",Georgia,serif;
  --font-body: "Inter","Montserrat",Arial,sans-serif;

  /* Scale */
  --fs-hero: clamp(2.2rem, 3.4vw, 4rem);
  --fs-h2: clamp(1.6rem, 2.2vw, 2.4rem);
  --fs-h3: clamp(1.2rem, 1.6vw, 1.6rem);
  --fs-body: 1.2rem;
  --fs-small: 1rem;
  --fs-xs: .95rem;

  --lh-tight: 1.1;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  --ls-title: .02em;
  --ls-upper: .18em;

  /* Spacing */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 5rem;

  /* Radius */
  --r-1: 5px;
  --r-2: 10px;
  --r-3: 20px;
  --r-pill: 50px;
  --r-round: 999px;

  /* Motion */
  --t-fast: .2s;
  --t-base: .25s;
  --e-out: ease;
}

/* ====== 1) RESET / BASE ====== */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }
html, body{ max-width: 100%; overflow-x: hidden; }
body{
  margin: 0;
  max-width: 100vw;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
img{ max-width: 100%; height: auto; display: block; }

/* ====== 2) BASE COMPONENTS (reusable) ====== */

/* Carousel / horizontal scroll */
.carousel{ width: 100%; overflow: hidden; }

.scroll-x{
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--s-4);
  margin: 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar{ display: none; }

/* ====== 3) TYPOGRAPHY (semantic classes) ====== */
.title-font{ font-family: var(--font-title); }
.body-text{ font-family: var(--font-body); }

.h1_hero{
  font-family: var(--font-title);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
  font-weight: 600;
}
.h2_section{
  font-family: var(--font-title);
  font-size: var(--fs-h2);
  line-height: 1.2;
  font-weight: 600;
}
.h3_subtitle{
  font-family: var(--font-title);
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: 600;
}

.eyebrow{
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
  font-weight: 600;
  opacity: .9;
}

.p_text{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}
.p_small{
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  opacity: .9;
}

.label_ui{
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.number-kpi{
  font-family: var(--font-title);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.nav-link{
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
}

.nav-link:hover{ transform: scale(1.2); }

/* ====== 4) BASE BUTTONS (without colors; colors go in Colors.css) ====== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 22px;
  border-radius: var(--r-3);
  border: 1px solid rgba(0,0,0,.08);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  user-select: none;
  transition: transform var(--t-base) var(--e-out);
}
.btn:hover{ transform: scale(1.03); }
.btn:active{ transform: scale(.99); }

/* button-like link */
.btn-text-link{
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 10px 14px;
  border-radius: var(--r-3);
}

/* Arrows */
.arrow{
  background: #000;
  color: #fff;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  transition: transform var(--t-base) var(--e-out);
}
.arrow:hover{ transform: scale(1.08); }
.arrow:active{ transform: scale(.98); }

/* Avoid hover scaling on .a_lead because it can break layouts */
.a_lead{
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: var(--lh-loose);
  font-weight: 400;
  opacity: .95;
}

/* ====== 5) ICONS ====== */
.img-icon{ width: 40px; }
.icon{ font-size: 4rem; }
.icon-circle{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  font-size: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ====== 6) UTILITIES (reduced, consistent) ====== */

/* Layout helpers */
.disnone{ display: none; }
.disflex{ display:flex; }
.inline-flex{ display:inline-flex; }
.block{ display:block; }
.hidden{ overflow:hidden; }
.scroll{ overflow:auto; }
.displaynone{ display:none; }

.row{ display:flex; flex-direction:row; }
.col{ display:flex; flex-direction:column; }
.wrap{ flex-wrap: wrap; }
.nowrap{ flex-wrap: nowrap; }

.center{ display:flex; align-items:center; justify-content:center; }
.center-x{ display:flex; justify-content:center; }
.center-y{ display:flex; align-items:center; }
.end-x{ display:flex; justify-content:flex-end; }
.under_item{ display:flex; justify-content:flex-end; }

/* Position */
.relative{ position: relative; }
.absolute{ position: absolute; }
.fixed{ position: fixed; }
.top0{ top: 0; }
.bottom0{ bottom: 0; }
.left0{ left: 0; }
.right0{ right: 0; }
.right10{ right: 10px; }

/* Text */
.text-center{ text-align:center; }
.text-left{ text-align:left; }
.text-right{ text-align:right; }

/* Radius */
.radius5{ border-radius: var(--r-1); }
.radius10{ border-radius: var(--r-2); }
.radius20{ border-radius: var(--r-3); }
.radius50{ border-radius: var(--r-pill); }
.round{ border-radius: var(--r-round); }

/* Cursor */
.pointer{ cursor: pointer; }

/* Weights */
.fw300{ font-weight: 300; }
.fw400{ font-weight: 400; }
.fw500{ font-weight: 500; }
.fw600{ font-weight: 600; }
.fw700{ font-weight: 700; }

/* Text transform */
.upper{ text-transform: uppercase; }
.capitalize{ text-transform: capitalize; }
.ls-title{ letter-spacing: var(--ls-title); }
.ls-upper{ letter-spacing: var(--ls-upper); }

/* Minimal spacing utilities */
.gap1{ gap: var(--s-1); }
.gap2{ gap: var(--s-2); }
.gap3{ gap: var(--s-3); }
.gap4{ gap: var(--s-4); }
.gap5{ gap: var(--s-5); }

.p1{ padding: var(--s-1); }
.p2{ padding: var(--s-2); }
.p3{ padding: var(--s-3); }
.p4{ padding: var(--s-4); }
.p5{ padding: var(--s-5); }

.m2{ margin: var(--s-2); }
.m4{ margin: var(--s-4); }
.mt4{ margin-top: var(--s-4); }
.mt6{ margin-top: var(--s-6); }
.mt7{ margin-top: var(--s-7); }
.mt10{ margin-top: var(--s-9); }

/* Z */
.z-1{ z-index: -1; }
.z10{ z-index: 10; }

/* Width / Height helpers */
.w100{ width: 100%; }
.h100{ height: 100%; }

.vw100{ width: 100vw; }
.vw90{ width: 90vw; }
.vw80{ width: 80vw; }
.vw70{ width: 70vw; }
.vw50{ width: 50vw; }
.vw30{ width: 30vw; }

.vh100{ height: 100vh; }
.vh90{ height: 90vh; }
.vh80{ height: 80vh; }
.vh70{ height: 70vh; }
.vh50{ height: 50vh; }

/* compatibility with previous typos */
.widt100{ width: 100%; }
.widt90{ width: 90%; }
.widt80{ width: 80%; }
.widt70{ width: 70%; }
.widt50{ width: 50%; }
.widt25{ width: 25%; }
.widt15{ width: 15%; }

.height100{ height: 100%; }
.height90{ height: 90%; }
.height70{ height: 70%; }
.height10{ height: 10%; }

/* =====================================================================
   7) RESPONSIVE (Mobile-first)
   - Only adjust what is needed. Do not duplicate everything.
   ===================================================================== */

/* Tablet (iPad) */
@media (min-width: 768px){
  :root{
    --fs-body: 1.1rem;
    --fs-small: 1rem;
  }
  .scroll-x{ padding: var(--s-5); }
}

/* Desktop */
@media (min-width: 1025px){
  :root{
    --fs-body: 1.05rem;
  }
  .scroll-x{ padding: var(--s-6); }
}

/* =========================================================
   MAIN.CSS · MOBILE RESPONSIVE (≤ 767px)
   Only global adjustments (layout, typography, helpers)
   Page-specific components live in Items.css
   ========================================================= */
@media (max-width: 767px){

  /* ===== Typography ===== */
  :root{
    --fs-body: 1rem;
    --fs-small: .95rem;
  }

  /* ===== Layout helpers ===== */
  .vw100, .vw90, .vw80, .vw70, .vw50, .vw30{ width: 100%; }
  .vh100{ min-height: 100vh; height: auto; }
  .vh90, .vh80, .vh70, .vh50{ height: auto; }

  .row{ flex-direction: column; }
  .wrap{ flex-wrap: wrap; }

  /* ===== Spacing ===== */
  .gap4{ gap: var(--s-3); }
  .gap5{ gap: var(--s-4); }

  .p4{ padding: var(--s-3); }
  .p5{ padding: var(--s-4); }

  .mt6{ margin-top: var(--s-5); }
  .mt7{ margin-top: var(--s-6); }

  /* ===== Text alignment ===== */
  .text-left,
  .text-right{ text-align: center; }

  /* ===== Buttons ===== */
  .btn--lg{
    padding: 12px 22px;
    font-size: 1rem;
    border-radius: var(--r-3);
  }

  /* ===== Utility visibility ===== */
  .mobile-hide{ display: none !important; }
  .mobile-show{ display: block !important; }

  /* ===== Scroll containers ===== */
  .scroll-x{
    padding: var(--s-3);
    gap: var(--s-3);
  }
}